3.10. Flex и Grid

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Flex и Grid

Первоначально вёрстка была довольно сложной, и разработчики использовали float, inline-block, таблицы в HTML. Однако, после появления Flexbox (в 2009 году), и Grid (2017), подход к расположению блоков на странице изменился.

★ Flexbox – гибкая раскладка, модель CSS для создания гибких одномерных макетов (распределение элементов в строке или столбце). Используется для выравнивания элементов в строке / столбце, или для динамического распределения пространства.

Основные свойства Flexbox:

• контейнер (display: flex)

  .container {
    display: flex;
    flex-direction: row | column; /* Направление */
    justify-content: center | space-between; /* Выравнивание по главной оси */
    align-items: center | stretch; /* Выравнивание по поперечной оси */
    gap: 10px; /* Расстояние между элементами */
  }

• элементы (flex-grow, flex-shrink, order)

  .item {
    flex-grow: 1; /* Растягивание элемента */
    order: 2; /* Порядок в контейнере */
  }

---

★ Grid – двумерная сетка, мощная система для создания сложных двумерных макетов (строки + столбцы). Используется для сложных макетов (лендинги, таблицы), и когда нужен контроль и по строкам, и по столбцам.

Основные свойства:

• контейнер (display: grid)

  .container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Колонки */
    grid-template-rows: 100px auto; /* Строки */
    gap: 20px; /* Отступы */
  }

• элементы (grid-column, grid-row)

  .item {
    grid-column: 1 / 3; /* Занимает 1-2 колонки */
    grid-row: 1; /* Первая строка */
  }